<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Dojo-Bootstrap/Marquee</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="assets/styles.css">
        <link rel="stylesheet" href="assets/docs.css">
        <link rel="stylesheet" href="assets/responsive.css">
        
        <style>
            .marquee {
                overflow: hidden;
                position: relative;
            }
            
            .marquee .marquee-item {
                position: absolute;
                top: 0px;	
            }
            
            .frame { 
                width: 320px; 
                height: 260px; 
                border: 1px solid #bbb; 
                padding: 3px; 
            }
            
            .frame h3 {
                padding: 0px 5px;
                margin: 0px;
            }
            
            .frame p.caption {
                padding: 0px 5px;
                margin: 0px;
            }
            
            #polaroid {
                height: 180px;
                width: 100%;
            }
            
            #polaroid .marquee-item {
                width: 100%;
            }
        </style>
    </head>

    <body data-spy="scroll" data-target=".bs-docs-sidebar">
        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <div class="nav-collapse collapse">
                        <ul class="nav">
                            <li><a href="index.html">Tests</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
            
        <header class="jumbotron subhead" id="overview">
            <div class="container">
                <h1>Dojo-Bootstrap/Marquee</h1>
            </div>
        </header>
        
        <div class="container">
            <div class="row">
                <section>
                    <div class="frame">
                        <div data-spy="marquee" class="marquee" id="polaroid" data-blend="true" data-life="5">
                            <div data-label="Bridge" data-caption="Nighttime display of the Memphis/Arkansas Bridge."><img src="assets/marquee-01.jpg"/></div>
                            <div data-label="Concert" data-caption="Young the Giant in concert at Minglewood Hall."><img src="assets/marquee-02.jpg"/></div>
                            <div data-label="Reflection" data-caption="Chicago skyscrapers reflecting in a building."><img src="assets/marquee-03.jpg"/></div>
                            <div data-label="Carnival" data-caption="A shot of the carnival from a ferris wheel."><img src="assets/marquee-04.jpg"/></div>
                            <div data-label="Bean" data-caption="The Bean in Chicago."><img src="assets/marquee-05.jpg"/></div>
                        </div>
                        <h3>Bridge</h3>
                        <p class="caption">Nighttime display of the Memphis/Arkansas Bridge.</p>
                    </div>
                </section>
            </div>
        </div>
        
        <script type="text/javascript" src="assets/config.js"></script>
        <script type="text/javascript" src="../vendor/dojo/dojo/dojo.js"></script>
        
        <script>
            require([
                "bootstrap/Marquee",
                "dojo/query",
                "dojo/on"
            ], function (
                Marquee,
                query,
                on
            ) {
                query('#polaroid').on('before', function(evt){
                    var messageData = evt.currentMessage.options;
                    query('.frame h3')[0].innerHTML = messageData.label;
                    query('.frame p.caption')[0].innerHTML = messageData.caption;
                });
            });
        </script>
    </body>
</html>